<template>
    <div class="app-container">
  
      <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="操作模块">
                <el-input
                  style="width: 95%"
                  v-model="searchObj.title"
                  placeholder="操作模块"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="操作人">
                <el-input
                  style="width: 95%"
                  v-model="searchObj.operName"
                  placeholder="操作人"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="操作时间">
                <el-date-picker
                  v-model="createTimes"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="margin-right: 10px; width: 100%"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="display: flex">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="fetchData()">
              搜索</el-button>
  
            <el-button icon="el-icon-refresh" size="mini" @click="resetData">
              重置</el-button>
          </el-row>
        </el-form>
      </div>
  
      <!-- 列表 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        border
        style="width: 100%; margin-top: 10px">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <el-table-column prop="title" label="系统模块" width="120" />
        <el-table-column prop="businessType" label="操作类型" width="120" />  
        <el-table-column prop="requestMethod" label="请求方式" width="120" /> 
        <el-table-column prop="operName" label="操作人员" width="120" />
        <el-table-column prop="operIp" label="操作ip" width="120" /> 
        <el-table-column prop="method" label="请求方法" width="190" />    
        <el-table-column prop="status" label="操作状态" width="140">
          <template slot-scope="scope">
            <p v-if="scope.row.status == 1">成功</p>
            <p v-else>失败</p>
              </template>
        </el-table-column>  
        <el-table-column prop="createTime" label="创建时间"/>   
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"/>
    </div>
  </template> 
  
  
  <script>
  import api from "@/api/operlog/operlog.js";
  export default {
    data() {
      return {
        listLoading: false, // 数据是否正在加载
        list: [], // banner列表
        total: 0, // 数据库中的总记录数
        page: 1, // 默认页码
        limit: 5, // 每页记录数
        searchObj: {}, // 查询表单对象
  
        createTimes: [], //数组中两个值，第一个为开始时间，第二个为结束时间
  
      };
    },
  
    created() {
      this.fetchData();
    },
  
    methods: {
      //列表
      fetchData(pageNum = 1) {
        this.page = pageNum;
  
        //封装开始时间与结束时间
        if (this.createTimes && this.createTimes.length == 2) {
          this.searchObj.createTimeBegin = createTimes[0];
          this.searchObj.createTimeEnd = createTimes[1];
        }
  
        api.getPageList(this.page, this.limit, this.searchObj).then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
        });
      },
  
      //重置方法
      resetData() {
        this.searchObj = {};
        this.createTimes = [];
        this.fetchData();
      },
    },
  };
  </script>